import React, {Component} from 'react';
import {Link, Route} from "react-router-dom";
import Detail from "./Detail";

class Message extends Component {
    state = {
        messageArr: [
            {id: '01', title: 'message001'},
            {id: '02', title: 'message002'},
            {id: '03', title: 'message003'}
        ]
    }
    replaceShow = (id, title) => {
        //replace跳转+携带param参数
        // this.props.history.replace(`/home/message/detail/${id}/${title}`)
        //replace跳转+携带search参数
        // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
        //replace跳转+携带state参数
        this.props.history.replace(`/home/message/detail`,{id,title})
    }
    pushShow = (id, title) => {
        //push跳转+携带param参数
        // this.props.history.push(`/home/message/detail/${id}/${title}`)
        //push跳转+携带search参数
        // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
        //push跳转+携带state参数
        this.props.history.push(`/home/message/detail`,{id, title})
    }
    back=()=>{
        this.props.history.goBack()
    }
    forward=()=>{
        this.props.history.goForward()
    }
    go=()=>{
        this.props.history.go(-2)
    }
    render() {
        const {messageArr} = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map((item) => {
                            return <li key={item.id}>
                                {/*向路由组件传递params参数*/}
                                {/*<Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>*/}
                                <button onClick={() => this.replaceShow(item.id, item.title)}>replace</button>
                                <button onClick={() => this.pushShow(item.id, item.title)}>push</button>
                                {/*向路由组件传递search参数*/}
                                {/*<Link to={`/home/message/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link>*/}
                                {/*向路由组件传递state参数*/}
                                <Link to={{pathname: '/home/message/detail', state: {id:item.id,title:item.title}}}>{item.title}</Link>
                            </li>
                        })
                    }
                </ul>
                <hr/>
                {/*声明接收params参数*/}
                {/*<Route path={'/home/message/detail/:id/:title'} component={Detail}></Route>*/}
                {/*search参数无需声明接收，正常注册路由即可*/}
                {/*<Route path={'/home/message/detail'} component={Detail}></Route>*/}
                {/*state参数无需声明接收，正常注册路由即可*/}
                <Route path={'/home/message/detail'}  component={Detail}></Route>
                <button onClick={this.back}>回退</button>
                <button onClick={this.forward}>前进</button>
                <button onClick={this.go}>go</button>
            </div>
        );
    }

}

export default Message;